<template>
  <div>
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <div style="display: flex; justify-content: right; align-items: center; margin: 0px 10px 20px 0px">
          <el-form
            ref="form"
            :inline="true"
            :model="queryForm"
            @submit.native.prevent
            style="display: flex; justify-content: center; align-items: center"
          >
            <!-- <el-button type="success" size="small" plain @click="creatDev(program)">初始化</el-button> -->
            <el-input v-model="title" placeholder="设备编码" style="width: 200px" />
          </el-form>
        </div>
      </el-col>

      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8" v-for="item in deviceList" :key="item">
          <el-card class="box-card" shadow="always">
            <div slot="header" class="clearfix">
              <div style="display: flex; flex-direction: row; align-items: center; justify-content: center">
                <div style="flex: 1">
                  <span>{{ item.deviceUuid }}</span>
                </div>
                <el-button style="padding: 3px 0" type="text" @click="showTable(item.deviceUuid)">
                  <i class="el-icon-warning-outline" style="font-size: 20px; color: #67c23a"></i>
                </el-button>
                <!-- <el-button style="padding: 3px 0" type="text" @click="showTable(item.deviceUuid)">故障统计</el-button> -->
              </div>
            </div>
            <div>
              <div style="display: flex; padding: 10px 0px">
                <div style="display: flex; flex-direction: column; align-items: left; justify-content: center; flex: 1; line-height: 24px">
                  <div>
                    设备名：
                    <span>
                      {{ item.deviceName ? item.deviceName : '-' }}
                      <!-- {{
                        item.deviceType == 1
                          ? '化成'
                          : item.deviceType == 2
                          ? '分容'
                          : item.deviceType == 3
                          ? 'DCR'
                          : item.deviceType == 4
                          ? 'OCV'
                          : item.deviceType == 5
                          ? 'LPM'
                          : item.deviceType == 6
                          ? '分选机'
                          : item.deviceType == 7
                          ? '仪器'
                          : item.deviceType == 8
                          ? '化成分容'
                          : ''
                      }}{{ item.deviceUuid.slice(-4) }} -->
                    </span>
                  </div>
                  <div>
                    治具数：
                    <span>-</span>
                  </div>
                  <!-- <div>
                    <el-button type="text" @click="showTable(item.deviceUuid)">故障统计</el-button>
                  </div> -->
                  <!-- <div>
                    设备类型：
                    <el-tag
                      effect="dark"
                      :color="
                        item.deviceType == 1
                          ? '#1e90ff'
                          : item.deviceType == 2
                          ? '#6b8e23'
                          : item.deviceType == 3
                          ? '#7b68ee'
                          : item.deviceType == 4
                          ? '#32cd32'
                          : item.deviceType == 5
                          ? '#ff00ff'
                          : item.deviceType == 6
                          ? '#3cb371'
                          : item.deviceType == 7
                          ? '#b8860b'
                          : item.deviceType == 8
                          ? '#ffa500'
                          : '#6495ed'
                      "
                    >
                      {{
                        item.deviceType == 1
                          ? '夹具化成'
                          : item.deviceType == 2
                          ? '夹具分容'
                          : item.deviceType == 3
                          ? 'DCR'
                          : item.deviceType == 4
                          ? 'OCV'
                          : item.deviceType == 5
                          ? 'LPM'
                          : item.deviceType == 6
                          ? '分选机'
                          : item.deviceType == 7
                          ? '仪器'
                          : item.deviceType == 8
                          ? '化成分容一体机'
                          : ''
                      }}
                    </el-tag>
                  </div> -->
                </div>
                <div style="flex: 0 0 80px">
                  <el-image style="" :src="iourl" fit="fill"></el-image>
                </div>
                <!-- <div style="flex: 1">
                  <el-descriptions title="" :column="1" border>
                    <el-descriptions-item>
                      <template slot="label">产量</template>
                      456
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">设备类型</template>
                    </el-descriptions-item>
                  </el-descriptions>
                </div> -->
              </div>
              <div
                style="
                  border-top: 1px solid #f2f3f5;
                  padding-top: 10px;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div style="flex: 1"></div>
                <div>
                  <el-button style="padding: 0px" type="text">
                    <el-button type="warning" size="mini" @click="alarmUploadShow(item.deviceUuid)">故障上传</el-button>
                    <el-button type="success" size="mini" @click="productUploadShow(item.deviceUuid)">产量上传</el-button>
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
    <vab-uploadExcle
      ref="alarmUpload"
      :limit="1"
      name="file"
      :size="10"
      :costNumber="costNumber"
      :equipmentCode="equipmentCode"
      :title="'故障数据'"
      :action="action"
      @refreshTable="freshData"
    />
    <vab-uploadExcle
      ref="productUpload"
      :limit="1"
      name="file"
      :size="10"
      :costNumber="costNumber"
      :equipmentCode="equipmentCode"
      :title="'产量数据'"
      :action="action"
      @refreshTable="freshData"
    />
    <el-dialog :title="tableTitle" :visible.sync="table" width="65%" custom-class="tableClass">
      <el-tabs v-model="activeName">
        <el-tab-pane label="故障统计" name="alarm">
          <el-table
            ref="tableSort"
            :data="list"
            :element-loading-text="elementLoadingText"
            :height="height"
            @selection-change="setSelectRows"
          >
            <el-table-column label="序号" show-overflow-tooltip width="95">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="治具号" prop="fixtureNumber" show-overflow-tooltip />
            <el-table-column label="报警内容" prop="alarmContent" show-overflow-tooltip />
            <el-table-column label="报警代码" prop="alarmCode" show-overflow-tooltip />
            <el-table-column label="报警等级" prop="alarmLevel" />
            <el-table-column label="是否有效" prop="alarmUserflag">
              <template #default="{ row }">
                <el-tag :type="row.alarmUserflag ? 'success' : 'info'" effect="dark">{{ row.alarmUserflag ? '有效' : '无效' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="发生时间" prop="alarmTime" width="200" />
            <el-table-column label="创建时间" prop="createdTime" width="200" />
          </el-table>
          <el-pagination
            :background="background"
            :current-page="queryForm.pageNo"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="queryForm.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-tab-pane>
        <el-tab-pane label="产量统计" name="product">
          <el-table
            ref="tableSort"
            :data="listPro"
            :element-loading-text="elementLoadingText"
            :height="height"
            @selection-change="setSelectRows"
          >
            <el-table-column label="序号" show-overflow-tooltip width="95">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="治具号" prop="JIG_ID" show-overflow-tooltip />
            <el-table-column label="状态" prop="CHECK_RESULT">
              <template #default="{ row }">
                <el-tag :type="row.CHECK_RESULT == 1 ? 'success' : 'info'" effect="dark">
                  {{ row.CHECK_RESULT == 1 ? '正常' : 'NG' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="NG原因" prop="NG_REASON" show-overflow-tooltip />
            <el-table-column label="测试开始时间" prop="TEST_START_TIME" width="200" />
            <el-table-column label="测试完成时间" prop="TEST_COMPLETE_TIME" width="200" />
          </el-table>
          <el-pagination
            :background="background"
            :current-page="queryFormPro.pageNo"
            :layout="layout"
            :page-size="queryFormPro.pageSize"
            :total="queryFormPro.total"
            @current-change="handleCurrentChangePro"
            @size-change="handleSizeChangePro"
          />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- <el-drawer title="" :visible.sync="top" direction="ttb" size="50%" :with-header="false">
      <div style="padding: 20px"></div>
    </el-drawer> -->
    <el-drawer title="治具列表" :visible.sync="right" direction="rtl" size="20%">
      <!-- <el-table ref="tableSort" :data="gridData" :show-header="false">
        <el-table-column label="设备名称" prop="projectName" show-overflow-tooltip>
          <template #default="scope">
            <div style="display: flex; padding: 16px">
              <div style="flex: 0 0 40px">
                <el-image style="" :src="zjurl" fit="fill"></el-image>
              </div>
              <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                <div style="font-size: 16px; font-weight: 600">治具{{ scope.$index + 1 }}</div>
                <div></div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table> -->
    </el-drawer>
    <el-pagination
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="pageNo"
      @current-change="deviceCurrentChange"
      :total="total"
      @size-change="deviceSizeChange"
    />
  </div>
</template>

<script>
  import { getProjectById } from '@/api/wordOrder'
  import { alarmUploadUrl, productUploadUrl } from '@/api/device'
  import { getAllByDevice } from '@/api/alarm'
  import { getAllDevice, creatDev, getProductByDevice } from '@/api/device'

  import VabUploadExcle from '@/components/VabUploadExcle'

  export default {
    components: {
      VabUploadExcle,
    },
    props: {},
    created() {
      this.getProjectById()
    },
    watch: {
      title(newValue, oldValue) {
        this.handleQuery()
      },
    },
    data() {
      return {
        activeName: 'alarm',
        action: alarmUploadUrl,
        id: this.$route.query.id,
        costNumber: '',
        program: '',

        equipmentCode: '',
        deviceList: [],
        pageNo: 1,
        pageSize: 9,
        total: 0,
        title: '',
        gridData: [{}, {}, {}, {}],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          equipmentCode: '',
          total: 0,
        },
        queryFormPro: {
          pageNo: 1,
          pageSize: 10,
          equipmentCode: '',
          total: 0,
        },

        tableTitle: '原始数据',
        list: [],
        listPro: [],
        zjurl: require('@/assets/img/zj.png'),
        iourl: require('@/assets/img/io.png'),
        table: false,
        right: false,
      }
    },
    methods: {
      freshData() {
        this.fetchTableData()
        this.fetchProductTableData()
      },
      async creatDev() {
        await creatDev({ costNumber: this.costNumber, deviceNumber: this.program.devices_number, deviceType: this.program.deviceType })
        this.fetchDevice()
      },
      async getProjectById() {
        const { data } = await getProjectById({ id: this.id })
        this.program = data
        this.costNumber = data.costNumber
        this.fetchDevice()
      },
      async fetchDevice() {
        console.log(this.costNumber)
        const { data, total } = await getAllDevice({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          costNumber: this.costNumber,
          title: this.title,
        })
        this.deviceList = data
        this.total = total
      },
      deviceSizeChange(val) {
        this.pageSize = val
        this.fetchDevice()
      },
      deviceCurrentChange(val) {
        this.pageNo = val
        this.fetchDevice()
      },
      alarmUploadShow(data) {
        this.action = alarmUploadUrl
        this.equipmentCode = data
        this.$refs['alarmUpload'].handleShow()
      },
      productUploadShow(data) {
        this.action = productUploadUrl
        this.equipmentCode = data
        this.$refs['productUpload'].handleShow()
      },
      showTable(val) {
        this.queryForm.equipmentCode = val
        this.queryFormPro.equipmentCode = val
        this.fetchTableData()
        this.fetchProductTableData()
        this.tableTitle = `原始数据[${val}]`
        this.table = true
      },
      handleQuery() {
        this.pageNo = 1
        this.fetchDevice()
      },

      //弹出表格数据处理
      async fetchTableData() {
        const { data, total } = await getAllByDevice(this.queryForm)
        this.list = data
        this.queryForm.total = total
      },
      async fetchProductTableData() {
        const { data, total } = await getProductByDevice(this.queryFormPro)
        this.listPro = data
        this.queryFormPro.total = total
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchTableData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchTableData()
      },
      handleSizeChangePro(val) {
        this.queryFormPro.pageSize = val
        this.fetchProductTableData()
      },
      handleCurrentChangePro(val) {
        this.queryFormPro.pageNo = val
        this.fetchProductTableData()
      },
    },
  }
</script>
<style scoped>
  /deep/ .el-dialog__body {
    padding: 0px 30px 20px 30px;
  }
</style>
